<div class="wrapper wrapper-content animated page-heading fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="row animate fadeIn">
                                <form id="searchForm" class="form-horizontal">
                                    <div class="ibox-title" style="border:none;">
                                        <h5 style="color: #00afef"><i>Search</i></h5>
                                    </div>
                                       <div class="ibox-content">
                                        <div class="form-group">
                                            <label class="col-xs-4 control-label">Zones</label>
                                            <div class="col-xs-5">
                                                <select name="zone" class="form-control chosen" id="">
                                                    <option value="">--</option>
                                                    <?php foreach ($zones as $key): ?>
                                                        <option value="<?php echo $key->zone_name; ?>"><?php echo $key->zone_name; ?></option>
                                                    <?php endforeach;?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-4 control-label">Task Name</label>
                                            <div class="col-xs-5">
                                                <input type="text" placeholder="" name="task_name" class="form-control" value="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-4 control-label">Assigned Meter Reader</label>
                                            <div class="col-xs-5">
                                                <input type="text" placeholder="" name="meter_reader" class="form-control" value="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-4 control-label"></label>
                                                <div class="col-xs-5">
                                                    <a href="javascript:document.getElementById('searchForm').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                                    <button id="search-btn" class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" > Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <button id = "adds" class="btn btn-success m-t-n-xs btn-md add-tab-btn" type="button"> Add</button>
                                </div>
                            </div>
                            <div class="row" id="searchResult" >
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content">
                                        <div class="table-responsive">
                                            <table class="dataTables table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">Task Name</th>
                                                        <th class="text-center">Meter Reader</th>
                                                        <th class="text-center">Zone</th>
                                                        <th class="text-center">Sequnece From</th>
                                                        <th class="text-center">Sequence To</th>
                                                        <th class="no-sort text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="resultfound">
                                                </tbody>
                                            </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
$(document).ready(function(){
    $(".chosen").chosen({width:"100%;"});
    $('.dataTables').DataTable({
        "order": [[ 1, "desc" ]],
        "columnDefs": [ {
          "targets": 'no-sort',
          "orderable": false,
          } ],
          "sDom": 'lTtip',
          "tableTools": {
                "aButtons": [{
                                "sExtends": "copy",
                                "sButtonText": "Copy to clipboard"
                            },
                            {
                                "sExtends": "xls",
                                "sButtonText": "Export to Excel"
                            }],
                "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
        }
      });
    $('#adds').click(function(){
            $('#notify').text("");
                if($('#count_add').val() == 0){
                    $('#tab-list-2').append('<li id="add-link" class="links"><a id="2nd" data-toggle="tab" href="#add">Add<button id="addX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="add" class="tab-pane"><div class="panel-body"><div id="change2"></div></div></div>');
                    $("#change2").load("<?php echo $this->session->userdata('forload') . '/add_form'; ?>")
                    $('#count_add').val('1');
                    add_action('show'); search_action('close');
                }add_action('show'); search_action('close');

        });
    $("#search-btn").click(function(e) {
            e.preventDefault();
            $('.dataTables').dataTable().fnDestroy();
            var trHTML='';
            $('#resultfound').empty();
            $('#searchResult').show();
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/search_charge_list'); ?>",
                cache: false,
                dataType: 'json',
                data: $('#searchForm').serialize(),
                success: function(e) {
                    console.log(e);
                    if(e == "none"){
                        // $('#resultfound').html("");
                        notifymsg("danger","No Result Found");
                    }else{
                        var countData=0;
                        $.each(e, function(i, item) {
                            trHTML += '<tr><td>'+ e[i].task_name +'</td><td>'+ e[i].name +'</td><td>'+ e[i].zone +'</td><td align="right">'+ e[i].seq_from +'</td><td align="right">'+ e[i].seq_to +'</td><td align="center"><button  style="margin-left:5px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs edit" taskid="'+e[i].task_id+'" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button style="margin-left:2px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs view" taskid="'+e[i].task_id+'" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                            countData++;
                        });
                        $('#resultfound').html(trHTML);
                        notifymsg("success","   . . . Search Success  , Found("+countData+") Item(s)");
                    }

                    $('.dataTables').DataTable({
                    "order": [[ 1, "desc" ]],
                    "columnDefs": [ {
                      "targets": 'no-sort',
                      "orderable": false,
                      } ],
                      "sDom": 'lTtip',
                      "tableTools": {
                            "aButtons": [{
                                            "sExtends": "copy",
                                            "sButtonText": "Copy to clipboard"
                                        },
                                        {
                                            "sExtends": "xls",
                                            "sButtonText": "Export to Excel"
                                        }],
                            "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                    }
                  });
                },
                error: function() {
                },
                complete: function() {
                    $("#search-btn").removeAttr('disabled');
                },
                beforeSend: function(){
                    $("#search-btn").attr('disabled',true);
                }
              });
            });

    $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.edit',function(){
                var id = $(this).attr('taskid');
                if($('#count_edit').val() == 0){
                    $('#tab-list-2').append('<li id="edit-link" class="links"><a data-toggle="tab" href="#edit">Edit<button id="editX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="edit" class="tab-pane"><div class="panel-body"><div id="change3"></div></div></div>');
                    $("#count_edit").val('1');
                    }
                $("#change3").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+id)
                edit_action('show'); search_action('close');
                notifymsg("hide","hide");
    });
    $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.view',function(){
                var id = $(this).attr('taskid');
                if($('#count_view').val() == 0){
                    $('#tab-list-2').append('<li id="view-link" class="links"><a data-toggle="tab" href="#view">View<button id="viewX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="view" class="tab-pane"><div class="panel-body"><div id="change4"></div></div></div>');
                    $("#count_view").val('1');
                    }
                $("#change4").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+id)
                view_action('show'); search_action('close');
                notifymsg("hide","hide");
            });

    });
</script>